<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script type="text/javascript" src="../../js/fanhui.js" ></script>
		<link href="../../css/dingdan.css"/>
		<title>我的订单</title>
	</head>
	<body>
		<div id="app">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color: red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">我的订单</label>
					<label slot="right" style="color: white;" @click="clearCar">清空</label>
				</van-nav-bar>
			</header>
			
			<div style="margin-top: 10px;"></div>
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<van-row v-for="(i,n) in shop" v-show="IsShow">
				<van-col span="24">
					<van-card :num="i.buyCount" :price="i.RealPrice" :title="i.Name" :origin-price="i.MarketPrice">
						<div slot="footer">
							<van-button size="small" @click="tixing">提醒发货</van-button>
							<van-button size="small"  @click="del(i)">取消订单</van-button>
								
							</van-button>
						</div>
						<div slot="thumb">
							<img :src="i.CoverImage" onerror="this.src='../../img/520.jpg'">
						</div>
					</van-card>
				</van-col>
			</van-row>
			</van-pull-refresh>
			<van-row v-show="IsShowNull">
				<van-col span="24" id="null">
					<van-icon name="cart-o" />
					<br />
					订单空空如也
				</van-col>
			</van-row>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					checked:false,
					jsonData: {},
					shop: [],
					IsShow: true,//商品
					IsShowNull: false,//我的订单删除时
					finished: false,//刷新
					isLoading: false
				},
				mounted: function() {
					var Name;//商品名称
					var CoverImage;//商品图片
					var RealPrice;//商品价格
					ajax({
						url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType: "jsonp",
						data: {
							p: 1
						},
						success: function(res) {
							console.log(res)
							for (var i = 0; i < 3; i++) {//for循环得到3个
								Name = res.Data[i].Name;
								CoverImage = res.Data[i].GoodsImageUrl.src;
								RealPrice = res.Data[i].RealPrice;
								vm.jsonData = {
									"Name": Name,
									"CoverImage": CoverImage,
									"RealPrice": RealPrice,
									"buyCount": 1,
									"checked": false
								}
								vm.shop.push(vm.jsonData);
							}
							console.log(vm.shop);
						},
					});
				},
				methods: {
					onRefresh: function() {						
						setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						}, 500);
					},
					clearCar: function() {
						if (vm.IsShowNull == true) {
							this.$toast('购物车已清空');
						} else {
							this.$dialog.confirm({
								title: '提示',
								message: '确认清空购物车'
							}).then(() => {
								vm.IsShow = false;
								vm.IsShowNull = true;
							}).catch(() => {

							});
						}
					},
					pay: function() {
						plus.webview.open("/views/pay.html", "pay");
					},
					onClickLeft: function() { //返回
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
					},
					del:function(i){
						var index = vm.shop.indexOf(i);
						if (index > -1) {
							this.$dialog.confirm({
								title: '提示',
								message: '确认删除此商品？'
							}).then(() => {
								vm.shop.splice(index, 1);
							}).catch(() => {
							
							});
						}
					},
					all:function(){
						for(var i = 0; i < vm.shop.length; i++){
							vm.shop[i].checked=vm.checked;
						}
					},
					tixing:function(){
						alert("提醒成功！！！");
					}
				},
				computed: {
					Prices: function() {
						this.sum = 0;
						for (var i = 0; i < this.shop.length; i++) {
							if (this.shop[i].checked == true) {
								this.sum += this.shop[i].RealPrice * this.shop[i].buyCount;
								console.log(this.sum);
							}
						}
						return this.sum * 100;
					}
				}
			});
		</script>
	</body>
</html>